<style>
.analysis {
	display: table;
	position: relative;
	width: 100%;
	margin: 0px 0px 5px 0px;
	background-color: #E1EEF4;
}

.analysisName {
	background-color: #2191C0;
    color: #FFFFFF;
    font-weight: bold;
    padding: 4px 10px;
    width: 300px;
    text-align: right;
    float: left;
}

.analysisNormsSelect {
	width: 250px;
	font-size: 12px !important;
	font-family: 'Helvetica', 'Arial', 'Sans' !important;
}

.analysisDescription {
    color: #00557F;
    text-align: center;
    width: 60%;
    display: table-cell;
    vertical-align: middle;
}

.editButtonDiv {
	display: table;
    height: 25px;
    position: relative;
    width: 100%;
}

.analysis-pop-up {
	visibility: hidden;
}

.analysis-description {
	border-width: 1px;
    float: right;
    font-family: 'Helvetica','Arial','Sans' !important;
    font-size: 12px !important;
    margin-right: 40px;
    padding: 1px;
    width: 200px;
}
</style>

<script>
$(document).ready(function() {
	$(".analysis-checkbox").click(function(){
		setDisabled($(this).next(".analysisDescription").find(".analysisNormsSelect"));
		setDisabled($(this).next(".analysisDescription").find(".analysis-description"));
	});
});

$(".analysis-checkbox").click(function(){
	if($(this).is(":checked")){
		setEnabled($(this).next(".analysisDescription").find(".analysisNormsSelect"));
		setEnabled($(this).next(".analysisDescription").find(".analysis-description"));
	} else{
		setDisabled($(this).next(".analysisDescription").find(".analysisNormsSelect"));
		setDisabled($(this).next(".analysisDescription").find(".analysis-description"));
	}
});

var setEnabled = function (element) {
	$(element).removeAttr('disabled');
	$(element).closest('.analysis').find('.analysisName').css('background', '#FF8732');
}

var setDisabled = function (element) {
	$(element).attr('disabled', 'disabled');
	$(element).closest('.analysis').find('.analysisName').css('background', '#2191C0');
}

$("#editAnalysesButton").click(function(){
	$("#editAnalysesButton").attr("disabled", true);	
});
var saveAnalyses = function () {
	var id = null;
	var isChecked = null;
	var description = null;
	var jsonObject = "";
	var surveyId = $("#hidden-survey-id").val();
	var medicineCardId = $("#hidden-med-card-id").val();
	var syndromeId = $("input[name='synd_radio']:checked").attr('value');

	jsonObject = jsonObject + "{'surveyId':" + surveyId + ",";
	jsonObject = jsonObject + "'medicineCardId':" + medicineCardId + ",";
	jsonObject = jsonObject + "'syndromeId':" + syndromeId + ",";
	jsonObject = jsonObject + "'analysesNorms':[";

	$(".analysis-checkbox").each(function() {
		isChecked = $(this).is(":checked");
		id = $(this).next(".analysisDescription").find(".analysisNormsSelect option:selected").val();
		if(id == "" || id == undefined) {
			id = $(this).next(".analysisDescription").find(".analysis-description").attr("name");
		}
		description = $(this).next(".analysisDescription").find(".analysis-description").val();
		if(description != "" && description != undefined) {
			description = "'" + description + "'";
		}else{
			description = null;
		}
		jsonObject = jsonObject + "{'id':" + id;
		jsonObject = jsonObject + ",'isChecked': " + isChecked;
		jsonObject = jsonObject + ",'description': " + description + "},";
		
		
	});
	jsonObject = jsonObject.substring(0, jsonObject.length - 1);
	jsonObject = jsonObject + "]}";

	console.log(jsonObject);
	
	$.ajax({
		type : "POST",
		url : "/surveyView/saveAnalyses",
		data : jsonObject,
		dataType : "json",
		contentType : "application/json",
		success : function(id) {
			$("#hidden-survey-id").val(id);
			noty({
				text: "&{'laboratory.save.success'}",
				layout: "topRight",
				type: "success"
			});
		},
		error : function(e) {
			noty({
				text: "&{'laboratory.save.error'}",
				layout: "topRight",
				type: "error"
			});
		}
	});
}
</script>

<div id="analyses-info">
%{	
analysesBySyndrome = syndrome != null ? models.Analysis.find("bySyndrome", syndrome).fetch() : null;
}%
#{if analysesBySyndrome != null && !analysesBySyndrome.isEmpty()}
	#{list items:analysesBySyndrome, as:'analysis'}
	<div class="analysis">
		<div class="analysisName">${analysis.analysisName}</div>
		<input class="analysis-checkbox" type="checkbox">
		<div class="analysisDescription">
			#{if analysis.analysisType.name() == 'DROPDOWN'}
	   			#{select 'analysisNorms', class:"analysisNormsSelect"}
					#{list items:analysis.analysisNorms, as:'analysisNorm'}
						#{option analysisNorm.analysisNormId}
							${analysisNorm.description}
							#{if analysisNorm.minValue == null && analysisNorm.maxValue != null}
								&{'<'}
								${analysisNorm.maxValue}
							#{/if}
							#{elseif analysisNorm.minValue != null && analysisNorm.maxValue == null}
								&{'>'}
								${analysisNorm.minValue}
							#{/elseif}
							#{elseif analysisNorm.minValue != null && analysisNorm.maxValue != null}
								${analysisNorm.minValue}
								&{'-'}
								${analysisNorm.maxValue}
							#{/elseif}
							${analysisNorm.unit}
						#{/option}
	    			#{/list}
				#{/select}
				<input class="analysis-description" type="text" value="" disabled="disabled" name="">
			#{/if}
			#{elseif analysis.analysisType.name() == 'DESCRIPTION'}
				%{
					analysisNorm = analysis.analysisNorms.get(0);
				}%
   				<input class="analysis-description" type="text" value="" disabled="disabled" name="${analysisNorm.analysisNormId}">
   			#{/elseif}
   			
   			
			<div class="analysis-pop-up">
				#{list items:analysis.analysisSubTypes, as:'analysisSubType'}
					<div class="analysis-sub-type">
						<div class="analysis-sub-type-name">${analysisSubType.analysisSubTypeName}</div>
						#{list items:analysisSubType.analysisDetails, as:'analysisDetail'}
							<div class="analysis-sub-type-detail">
								<div class="analysis-sub-type-detail-name">${analysisDetail.analysisDetailName}</div>
								<input class="analysis-checkbox" type="checkbox">
							</div>
						#{/list}
					</div>
				#{/list}	
			</div>
		</div>
	</div>
	#{/list}
	<div class="editButtonDiv">
		<input type="submit" class="editButton" onclick="saveAnalyses();" id="editAnalysesButton" value="&{'save'}">
	</div>
#{/if}
</div>